<template>
    <div id="background" class="background">
        <div id="/mainPage/main" class="no" @click="change(1)"><a-icon type="home" style="margin-right:1vh"/>首页</div>
        <div id="/mainPage/medicine" class="no" @click="change(2)"><a-icon type="medicine-box" style="margin-right:1vh"/>药品信息检索</div>
        <div id="/mainPage/patients" class="no" @click="change(3)"><a-icon type="idcard" style="margin-right:1vh"/>患者信息检索</div>
        <div id="/mainPage/images" class="no" @click="change(4)"><a-icon type="picture" style="margin-right:1vh"/>医学影像处理</div>
        <div id="/mainPage/booking" class="no" @click="change(5)"><a-icon type="reconciliation" style="margin-right:1vh"/>会诊预约处理</div>
        <div id="/mainPage/answer" class="no" @click="change(6)"><a-icon type="mail" style="margin-right:1vh"/>线上咨询消息</div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            bts:{
                1:"/mainPage/main",
                2:"/mainPage/medicine",
                3:"/mainPage/patients",
                4:"/mainPage/images",
                5:"/mainPage/booking",
                6:"/mainPage/answer",
            }
        }
    },
    methods:{
        change(btid){
            for(let i = 1;i<=6;i++){
                if(i != btid) document.getElementById(this.bts[i]).className = "no"
                else{
                    document.getElementById(this.bts[i]).className = "yes"
                    this.$router.push(this.bts[i])
                } 
            }
        }
    },
    mounted(){
        if(this.$route.path.substr(0, 10)=="/mainPage/")  document.getElementById(this.$route.path).className = "yes"
    }
}
</script>
<style lang="scss" scoped>
.background{
    background-color: rgba(82, 183, 245, 1);
    border-top-right-radius: 60%;
    margin-top: 7vh;
    height: 85vh;
    width: 20vh;
    .no{
        height: 6vh;
        margin-top: 5vh;
        color: rgba(255, 255, 255, 0.6);
        font-family: fangsong;
        font-weight: bolder;
        font-size: 15px;
        padding-top: 6vh;
        padding-left: 1.3vh;
    }
    .no:hover{
        height: 6vh;
        margin-top: 5vh;
        color: rgba(255, 255, 255, 1.0);
        font-family: fangsong;
        font-weight: bolder;
        font-size: 15px;
        padding-top: 6vh;
        padding-left: 1.3vh;
    }
    .yes{
        height: 6vh;
        margin-top: 5vh;
        color: rgba(255, 255, 255, 1.0);
        font-family: fangsong;
        font-weight: bolder;
        font-size: 15px;
        padding-top: 6vh;
        padding-left: 1.3vh;
    }
}
</style>